<template>
	<uni-popup ref="popup" type="bottom">
		<view class="selection">
			<view class="text">邀新保障余额</view>
			<view class="space-between" style="width: 100%;justify-content: space-around;">
				<input class="uni-input" type="number" v-model="min" maxlength="5" placeholder="0" />
				<view class="center but"></view>
				<input class="uni-input" type="number" v-model="max" maxlength="5" placeholder="0" />
			</view>
			<view class="center lis" style="justify-content: space-around;">
				<view @click="submit(1)">取消</view>
				<view @click="submit(2)">确认</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { errorToast } from '@/utils/prompt';
	const emit = defineEmits(['confirm']);
	const popup = ref(null)
	const min = ref()
	const max = ref()
	function submit(num : number) {
		switch (num) {
			case 1:
				close()
				emit('confirm');
				break;
			case 2:
				if (!min.value) {
					errorToast('请输入最小值')
					return
				} else if (!max.value) {
					errorToast('请输入最大值')
					return
				} else if (min.value > max.value) {
					errorToast('请筛选正确的区间值')
					return
				}
				emit('confirm', min.value, max.value);
				close()
				break;
		}
	}
	function open() {
		popup.value.open()
	}
	function close() {
		popup.value.close();
	}
	defineExpose({
		open,
		close
	});
</script>

<style scoped lang="less">
	.selection {
		width: 100%;
		background: #fff;
		padding-bottom: 40rpx;
		box-sizing: border-box;

		.text {
			width: 100%;
			padding: 15rpx;
			box-sizing: border-box;
		}
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	input {
		flex: none;
		width: 210rpx;
		height: 88rpx;
		background: #ECF1F5;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
	}

	.lis {
		view {
			width: 260rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 5px;
			margin-top: 45rpx;
		}

		view:nth-of-type(1) {
			background: #eee;
			box-sizing: border-box;
		}

		view:nth-of-type(2) {
			background: #558AF1;
			color: #fff;
		}
	}

	.but {
		width: 30rpx;
		height: 4rpx;
		border-radius: 5rpx;
		background-color: #333;
	}
</style>